<template>
    <div v-for="item in list" :key="item.id">
        <!-- <input type="checkbox" v-model="item.proStatus" @click="clickItem" /> -->
        <input type="checkbox" :checked="item.proStatus" @click="clickItem(item.id, $event)" />
        --- 商品名 {{ item.proName }}
        --- 商品价格 {{ item.proPrice }}
        --- <button @click="add(item.id)">+</button> {{ item.proNumber }} <button @click="sub(item.id)">-</button>
        --- 小计: {{ item.proPrice * item.proNumber }}
    </div>
</template>

<script>
export default {
    props: ['list'],
    methods: {
         // 计算总计
         getTotalPrice() {
            let _totalPrice = 0;
            let checkedNum = 0
            this.list.forEach((item) => {
                if (item.proStatus) {
                    checkedNum++
                    _totalPrice += item.proNumber * item.proPrice;
                }
            });
            this.$emit('setprice', _totalPrice)
            this.$emit('setcheckednum', checkedNum)
        },
        // 选中某一项
        clickItem(id, e) {
            // 商品的选中状态使用 v-model 处理
            // setTimeout(() => {
            //     this.getTotalPrice();
            // });

            this.list.forEach(item => {
                if (item.id === id) {
                    item.proStatus = e.target.checked
                }
            })

            this.getTotalPrice()
        },
        // 增加商品收藏数量
        add(id) {
            // console.log("数量+1", id);
            const info = this.list.find((item) => item.id === id);
            info.proNumber++;

            this.getTotalPrice();
        },
        // 减少商品收藏数量
        sub(id) {
            const info = this.list.find((item) => item.id === id);

            if (info.proNumber === 1) return;

            info.proNumber--;

            this.getTotalPrice();
        },
    },
    mounted () {
        this.getTotalPrice()
    }

}
</script>